<template>
  <div class="setting-menu">
    <el-drawer
            title="更多"
            :show-close=false
            :visible="this.$store.state.showmenu"
            :direction="this.$store.state.showdirection"
            :before-close="handleClose"
            size="70%"
            >
      <div class="mainbox">
        <div class="topbox">
          <p>消息中心</p>
          <setting-menu-item v-bind:items="topboxitem"></setting-menu-item>
        </div>
        <div class="middlebox">
          <p>音乐服务</p>
          <setting-menu-item v-bind:items="middleboxitem"></setting-menu-item>
        </div>
        <div class="bottombox">
          <p>其他设置</p>
          <setting-menu-item v-bind:items="bottomboxitem"></setting-menu-item>
        </div>
        <div class="exitlogin" v-if="Object.keys(this.$store.state.userInfo).length !=0">
          <button @click="logout">退出登录</button>
        </div>
        <div class="exitlogin" v-else>
          <button @click="loginnow">立即登录</button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import {logout} from "../../../network/login";
  import SettingMenuItem from "./ChildSettingMenu/SettingMenuItem";
    export default {
        name: "SettingMenu",
        components:{
            SettingMenuItem
        },
        data(){
            return{
                topboxitem:['消息中心','云贝中心','创作者中心'],
                middleboxitem:['演出','商城','口袋彩铃','游戏专区'],
                bottomboxitem:['设置','夜间模式','定时关闭','个性装扮'],
            }
        },
        methods:{
            handleClose(done) {
                this.$store.commit('hideMenu');
            },
            logout(){
                logout().then(res=>{  //登出
                    localStorage.clear();  //清除缓存
                    document.cookie="token=;path=/;" //清除cookies
                    this.$router.replace('/find')
                    window.location.reload();  //重载页面
                })
            },
            loginnow(){
              this.$router.replace('/login')
            }


        },
    }
</script>

<style scoped>
  .topbar{
    position: relative;
    width: 60px;
    top: -44px;
    z-index: 12;
    text-align: center;
  }

  .setting-menu{
    width: 100%;
    position: absolute;

  }

  .mainbox{
    width: 100%;
    height: 100%;
  }

  .topbox{
    width: 90%;
    background-color: #f5f5f5;
    border-radius: 15px;
    margin: 0 auto;
  }

  .topbox p{
    font-weight: 600;
    padding-top: 10px;
    margin-left: 15px;
  }

  .middlebox{
    background-color: #f5f5f5;
    border-radius: 15px;
    width: 90%;
    margin: 0 auto;
  }

  .middlebox p{
    font-weight: 600;
    padding-top: 10px;
    margin-left: 15px;
  }

  .bottombox{
    background-color: #f5f5f5;
    border-radius: 15px;
    width: 90%;
    margin: 0 auto;
  }

  .bottombox p{
    font-weight: 600;
    padding-top: 10px;
    margin-left: 15px;
  }

  .exitlogin{
    width: 100%;
    text-align: center;
  }

  .exitlogin button{
    outline: none;
    border: none;
    width: 90%;
    height: 40px;
    border-radius: 15px;
  }







</style>